<template>
	<view class="bcg" :style="{'padding-top':statusBarHeight+ 47 + 'px'}">
		<view class="title_img">
			<image src="../../static/login.jpg" mode=""></image>
		</view>
		<view class="content">
			<view class="con_flex">
				<view :class="index== 1?'texts':'text'" @click="change(1)">账号登录</view>
				<view :class="index== 2?'texts':'text'" @click="change(2)">账号注册</view>
			</view>
			<view class="login" v-if="index == 1">
				<view class="item">
					<view class="ts">账号</view>
					<input v-model="params.phone" type="number" maxlength="11" placeholder="请输入手机号" />
				</view>
				<view class="item">
					<view class="ts">密码</view>
					<input v-model="params.openId" type="text" placeholder="请输入密码" />
				</view>
			<!-- 	<view class="item">
					<view class="item_flex">
						<view class="tss">验证码</view>
						<input v-model="params.code" type="number" placeholder="请输入验证码" />
					</view>
					<image class="yz" :src="params.codeurl" mode=""></image>
				</view> -->
				<view class="mim">
					<switch class="sw" :checked='isshow'  type='checkbox' @change="switch2Change"/>
					记住密码
				</view>
				<view class="btn" @click="handleLogin">
					立即登录
				</view>
			</view>
			<view class="login" v-else>
				<view class="item">
					<view class="ts">账号</view>
					<input v-model="params.phone" type="number" maxlength="11" placeholder="请输入手机号" />
				</view>
				<view class="item">
					<view class="ts">密码</view>
					<input v-model="params.openId" type="text" placeholder="请输入密码" />
				</view>
				<view class="item">
					<view class="item_flex">
						<view class="tss">验证码</view>
						<input v-model="params.code" type="number" placeholder="请输入验证码" />
					</view>
					<image class="yz" :src="params.codeurl" mode=""></image>
				</view>
				<view class="btn" @click="handleRegister">
					注册账号
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		registerUser,
		getText,
		getlogin
	} from '../../common/http.api.js'
	export default {
		data() {
			return {
				statusBarHeight: uni.getStorageSync('heights'),
				index: 1,
				isshow:true,
				params: {
					codeurl: '',
					phone: '',
					openId: '',
					nickName: '',
					code: '',
					uuid: ''
				}
			};
		},
		onLoad() {
			this.getcode()
		},
		onShow() {
			if(uni.getStorageSync('phone') && uni.getStorageSync('openId')){
				this.params.phone = uni.getStorageSync('phone')
				this.params.openId = uni.getStorageSync('openId')
			}
		},
		methods: {
			switch2Change(e){
				this.isshow = e.detail.value
			},
			change(i) {
				this.index = i
			},
			getcode() {
				getText().then(res => {
					this.params.codeurl = "data:image/gif;base64," + res.img;
					this.params.uuid = res.uuid
				})
			},
			handleLogin() {

				if (this.params.phone == '') {
					uni.showToast({
						title: '请输入账号',
						duration: 2000,
						mask: false,
						icon: "none"
					})
				} else if (this.params.openId == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						mask: false,
						icon: "none"
					})

				} else{
					getlogin(this.params).then(res => {
						if (res.code == 200) {
							uni.setStorageSync('token', res.data.token)
							uni.showToast({
								icon: 'success',
								title: '登录成功'
							})
							if(this.isshow && this.index == 1){
								uni.setStorageSync('phone',this.params.phone)
								uni.setStorageSync('openId',this.params.openId)
							}else{
								console.log('123213');
								uni.removeStorageSync('phone')
								uni.removeStorageSync('openId')
							}
							uni.switchTab({
								url:'/pages/index/index'
							})
						} else {
							this.getcode()
						}
					})
				}
			},
			handleRegister() {
				if (this.params.phone == '') {
					uni.showToast({
						title: '请输入账号',
						duration: 2000,
						mask: false,
						icon: "none"
					})
				} else if (this.params.openId == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						mask: false,
						icon: "none"
					})
				
				} else if (this.params.code == '') {
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						mask: false,
						icon: "none"
					})
				} else {
					registerUser(this.params).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '注册成功,请登录'
							})
							this.index = 1
							this.params = {
								codeurl: '',
								phone: '',
								openId: '',
								nickName: '',
								code: '',
								uuid: ''
							}
							this.getcode()
						} else {
							this.getcode()
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.mim{
		margin-top: 20rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}
	.bcg {
		width: 750rpx;
		height: 850rpx;
		background: linear-gradient(#598DFE 0%, #FFFFFF 100%);
	}

	.title_img {
		width: 217rpx;
		height: 217rpx;
		margin: 120rpx auto 80rpx;

		image {
			width: 217rpx;
			height: 217rpx;
		}
	}

	.content {
		.con_flex {
			display: flex;
			width: 500rpx;
			margin: 0 auto;
			justify-content: space-between;

			.texts {
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: bold;
			}

			.text {
				font-size: 36rpx;
				color: #000000;
			}
		}
	}

	.login {
		width: 70%;
		margin: 30rpx auto;
		.item {
			display: flex;
			background-color: #FFFFFF;
			margin-bottom: 26rpx;
			align-items: center;
			border-radius: 10rpx;
			.item_flex {
				display: flex;
				align-items: center;
				width: 100%;
				.tss {
					font-size: 28rpx;
					color: #000000;
					margin: 20rpx;
					width: 30%;
				}
			}
			.yz {
				width: 30%;
				height: 70rpx;
				border-radius: 8rpx;
			}
			.ts {
				font-size: 28rpx;
				color: #000000;
				margin: 20rpx;
			}
		}
		.btn {
			width: 500rpx;
			height: 86rpx;
			background: linear-gradient(#5173EB 0%, #598DFD 100%);
			margin: 240rpx auto;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 86rpx;
			text-align: center;
			border-radius: 43rpx;
		}
	}
</style>